import React,{createContext,useReducer} from "react"; 
// createContext/useContext 提供一个共享状态的方式，useReducer 提供一个改变转态的方式




const UPDATE_COLOR = "UPDATE_COLOR";

function colorReducer(state,action) {
    switch(action.type) {

        case 'UPDATE_COLOR':
            return action.color;
       
        default:
            return state;
    }
}

// 要将 context 组件和 Color 组件都暴露出去
export const ColorContext = createContext();

export function Color(props) {

    const [color,dispatch] = useReducer(colorReducer,'black');

    return (

        <ColorContext.Provider value={{color,dispatch}}>
            {props.children}
            {/* 通过 props.children 来传递处于 Color 组件内部的子组件  */}
        </ColorContext.Provider>
    )
}

